{% extends 'base.html' %}

{% block title %}Free skill check — {{ course.title }}{% endblock %}

{% block content %}
<section class="py-5">
  <div class="container" style="max-width:36rem;">
    <div class="card border-0 shadow-sm rounded-4 p-4 text-center">
      <div class="display-6 text-primary mb-2"><i class="bi bi-clipboard2-pulse"></i></div>
      <h1 class="h3 fw-bold">Free skill diagnostic</h1>
      <p class="text-muted">{{ course.title }}</p>
      <ul class="list-unstyled small text-muted text-start mx-auto mb-4" style="max-width:22rem;">
        <li class="mb-2">• {{ 12 }} quick MCQs from the real question bank</li>
        <li class="mb-2">• Instant projected score — no account needed</li>
        <li class="mb-2">• Leave your email / WhatsApp to unlock the result (we may send a follow-up discount)</li>
      </ul>
      <a href="{% url 'courses:diagnostic_quiz' slug=course.slug %}" class="btn btn-primary btn-lg w-100 fw-semibold">
        Start free check
      </a>
      <a href="{% url 'courses:course_detail' slug=course.slug %}" class="btn btn-link mt-2">Back to course</a>
    </div>
  </div>
</section>
{% endblock %}